<!--  -->
<template>
<div>
    <template>
  <el-table
    :data="tableData.filter(data => !search || data.BookName.toLowerCase().includes(search.toLowerCase()))"
    style="width: 90%">
    <el-table-column
      label="序列号"
      prop="Bid"
      align="center">
    </el-table-column>
    <el-table-column
      label="图书名称"
      prop="BookName"
      align="center">
    </el-table-column>
    <el-table-column
      label="图书作者"
      prop="BookAuthor"
      align="center">
    </el-table-column>
    <el-table-column
      label="图书库存"
      prop="BooksSum"
      align="center">
    </el-table-column>
    <el-table-column label="图书状态" prop="State" align="center">
    <template slot-scope="scope">
        <span v-if="scope.row.State == 0">已上架</span>
        <span v-if="scope.row.State == 1">未上架</span>
    </template>
</el-table-column>
    <el-table-column
      align="right">
      <template slot="header">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          v-if="scope.row.State == 0"
          @click="handleEdit(scope.$index, scope.row)">下架</el-button>
        <el-button
          size="mini"
          v-if="scope.row.State == 1"
          @click="handleEdit(scope.$index, scope.row)">上架</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
   background
    layout="prev, pager, next"
    @current-change="handleCurrentChange"
    :page-count="pagecount"
    :current-page="page"
    class="fenye">
</el-pagination>
</template>
</div>
</template>

<script>
export default {
data() {
return {
    tableData:[],
    search:"",
    page:1,
    pagecount:0
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {
    this.getbooks(1)
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {

},
methods:{
  open1(a) {
        this.$notify({
          title: '成功',
          message: a,
          type: 'success'
        });
      },
    getbooks(val){
        var url=`http://localhost:3000/BookSet?page=${val}`
        // console.log(url)
        this.axios.get(url).then(res=>{
          this.tableData=res.data.results.datas
          this.page=res.data.results.page
          this.pagecount=res.data.results.pagecount
          // console.log(res)
        })
    },
    handleCurrentChange(val){
      // console.log("点击上一页或者下一页按钮",val)
      this.getbooks(val)
    },
    handleEdit(index, row) {
        // console.log(row);
        var url=`http://localhost:3000/SetState?Bid=${row.Bid}&State=${row.State}`
        this.axios.get(url).then(res=>{
          // console.log(res)
          // location.reload();
          this.getbooks(this.page)
          this.open1(res.data.message)
          // alert(res.data.message)
        })
      },
      handleDelete(index, row) {
        var url=`http://localhost:3000/DeleteBooks?Bid=${row.Bid}`
        // console.log(url)
        this.axios.get(url).then(res=>{
          console.log(res)
          // location.reload();
          this.getbooks()
          // alert("删除图书成功")
          this.open1("删除图书成功")
        })
      }
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.fenye{
        display: block;
        position: absolute;
        bottom: 20px;
        margin-left: 33%;
    }
</style>